<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>练习5：DOM操作</title>
    <style type="text/css">
        html,
        div,
        ul,
        li {
            margin: 0px;
            padding: 0px;
        }
        
        a {
            cursor: pointer;
        }
        
        li {
            list-style: none;
            cursor: pointer;
        }
        
        fieldset {
            border: #000 1px dashed;
            width: 225px;
            height: 225px;
            padding: 10px;
            text-align: center;
            float: left;
            margin-left: 5px;
        }
        
        #cont_left {
            width: 300px;
            height: 500px;
            float: left;
        }
        
        #cont_right {
            float: left;
        }
        
        .newcss1 {
            background-color: yellowgreen;
        }
    </style>
</head>

<body>
    <div id="cont_left">
        <ul><img src="img/fold.gif"><a onclick="show('menu1')"> 通过DOM获取信息 </a>
            <ul id="menu1">
                <li onclick="showImg()"><img src="img/doc.gif">获取原始图片路径</li>
                <li onclick="getFruit()"><img src="img/doc.gif">获取我喜欢的水果</li>
            </ul>
        </ul>

        <ul><img src="img/fold.gif"><a onclick="show('menu2')"> 通过DOM操作元素 </a>
            <ul id="menu2">
                <li onclick="createImg()"><img src="img/doc.gif">创建图片</li>
                <li onclick="cloneImg()"><img src="img/doc.gif">克隆图片</li>
                <li onclick="changeImg()"><img src="img/doc.gif">改变图片</li>
                <li onclick="removeImg()"><img src="img/doc.gif">删除图片</li>
            </ul>
        </ul>

        <ul><img src="img/fold.gif"><a onclick="show('menu3')"> 通过DOM操作样式 </a>
            <ul id="menu3">
                <li onclick="changeCss1()"><img src="img/doc.gif">为原始图片加上行间样式</li>
                <li onclick="changeCss2()"><img src="img/doc.gif">为所有的fieldset加上内部样式</li>
            </ul>
        </ul>

    </div>
    <fieldset>
        <legend>原始图片</legend>
        <img id="fruit" src="img/fruit.jpg">
    </fieldset>
    <fieldset>
        <legend>图片路径</legend>
        <p id="msg1">在这里显示</p>
    </fieldset>
    <fieldset>
        <legend>选择你喜欢的水果</legend>
        <ul style="text-align: left;">
            <li>
                <input name="enjoy" type="checkbox" value="苹果" />苹果
            </li>
            <li>
                <input name="enjoy" type="checkbox" value="香蕉" checked="checked" />香蕉
            </li>
            <li>
                <input name="enjoy" type="checkbox" value="葡萄" />葡萄
            </li>
            <li>
                <input name="enjoy" type="checkbox" value="梨" checked="checked" />梨
            </li>
            <li>
                <input name="enjoy" type="checkbox" value="西瓜" />西瓜
            </li>
        </ul>
        <div id="msg2" style="margin-top: 10px;text-align: left;"></div>
    </fieldset>
    <fieldset>
        <legend>创建图片</legend>
        <div id="msg3"></div>
    </fieldset>
    <fieldset>
        <legend>克隆图片</legend>
        <div id="msg4"></div>
    </fieldset>
    <script>
        //菜单收缩与扩展
        function show(title) {
            let currentMenu = document.getElementById(title);
            let currentStatus = currentMenu.style.display;
            currentMenu.style.display = currentStatus == "" ? "none" : "";
        }
        //获取原始图片路径
        function showImg() {
            //获取原始图片路径
            let img = document.getElementById("fruit");
            let msg = document.getElementById("msg1");
            //将图片路径显示到对应位置
            msg.innerHTML = img.src;
        }
        //获取喜欢的水果
        function getFruit() {

            let enjoy = document.getElementsByName("enjoy");
            let msg = document.getElementById("msg2");
            let fruit = "";
            for (let i = 0; i < enjoy.length; i++) {

                if (enjoy[i].checked) {

                    fruit += enjoy[i].value + " ";
                }
            }

            msg.innerHTML = fruit;

        }
        //创建图片
        function createImg() {

            let msg3 = document.getElementById("msg3");
            let img = document.createElement("img");
            img.src = "img/grape.jpg";
            msg3.appendChild(img);

        }
        //克隆图片
        function cloneImg() {

            let msg4 = document.getElementById("msg4");
            let img = document.getElementById("fruit");
            let newImg = img.cloneNode(true);
            msg4.appendChild(newImg);
        }
        //改变图片
        function changeImg() {

            let img = document.getElementById("fruit");
            img.src = "img/grape.jpg";

        }
        //删除图片
        function removeImg() {

            let img = document.getElementById("fruit");
            let parent = img.parentNode;
            parent.removeChild(img);

        }
        //操作样式1
        function changeCss1() {

            let img = document.getElementById("fruit");
            img.style.border = "4px solid red";

        }
        //操作样式2
        function changeCss2() {

            let fieldset = document.getElementsByTagName("fieldset");
            for (let i = 0; i < fieldset.length; i++) {

                fieldset[i].style.border = "4px solid #000";
                fieldset[i].style.width = "225px";
                fieldset[i].style.height = "225px";
                fieldset[i].style.padding = "10px";
            }

        }
    </script>
</body>

</html>